<template>
  <p-drawer
    placement="right"
    :closable="false"
    width="calc(100vw - 200px)"
    :visible="visible"
    :mask-closable="false"
    :destroy-on-close="true"
    :z-index="9999"
    @close="onClose"
  >
    <TaskTitle
      icon-name="Det"
      :title-name="type === 'leads' ? '线索' + '详情' : '商机' + '详情'"
      color="green"
    />
    <div class="list-container">
      <TableLose :data-source="form.loseList" />
      <TitleSecondary title="基本信息" />
      <div>
        <FormClueList v-if="type === 'leads'" :form="form" />
        <FormBusinessList v-else :form="form" />
      </div>
      <ProductList
        :data-source="form.opportunityProductList || form.leadsProductList"
      />
      <ContactList
        :data-source="form.opportunityContactList || form.leadsContactList"
      />
      <SalesTeamList
        :data-source="form.opportunitySalesTeamList || form.leadsSalesTeamList"
      />
      <ContractList
        v-if="form.opportunityContractList"
        :data-source="form.opportunityContractList"
      />
      <VisitList
        :data-source="form.opportunityVisitList || form.leadsVisitList"
      />
      <AttachList :data-source="form.attachmentList" />
      <TableBusinessNode
        v-if="form.opportunityStageList"
        :data-source="form.opportunityStageList"
      />
      <ProgressLog :list="operationLogInformation" />
      <BottomLine />
    </div>
    <ButtonGroup
      class="footer"
      :options="footerButtons"
      @click="handleButtonClick"
    />
  </p-drawer>
</template>

<script>
import { getOperationLog } from '@/api/clue.js';
import TableBusinessNode from '@/views/business-follow/components/TableBusinessNode.vue';
import TableLose from '@/components/table/TableLose.vue';
import FormClueList from '@/components/task/FormClueList.vue';
import FormBusinessList from '@/components/task/FormBusinessList.vue';
import ProductList from '@/components/table/ProductList.vue';
import ContactList from '@/components/table/ContactList.vue';
import SalesTeamList from '@/components/table/SalesTeamList.vue';
import ContractList from '@/components/table/ContractList.vue';
import VisitList from '@/components/table/VisitList.vue';
import AttachList from '@/components/table/AttachList.vue';
import ProgressLog from '@/components/task/ProgressLog.vue';
export default {
  components: {
    ProductList,
    ContactList,
    SalesTeamList,
    ContractList,
    VisitList,
    AttachList,
    ProgressLog,
    FormClueList,
    FormBusinessList,
    TableLose,
    TableBusinessNode,
  },
  props: {
    detail: {
      type: Object,
      default: () => {},
    },
    visible: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: 'leads',
    },
  },
  data() {
    return {
      operationLogInformation: [], //操作日志请求返回的信息
    };
  },
  computed: {
    form() {
      return this.detail || {};
    },
    footerButtons() {
      return [
        {
          key: 'close',
          label: '返回',
        },
      ];
    },
  },
  watch: {
    'detail.leadsNo': {
      handler(val) {
        val && this.handleChangeIcon();
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    async handleChangeIcon() {
      const res = await getOperationLog(
        this.type,
        this.detail.opportunityNo || this.detail.leadsNo
      );
      this.operationLogInformation = res.data.data;
    },
    onClose() {
      this.$emit('update:visible', false);
      this.$emit('fresh');
    },
    // 返回
    closeCallback() {
      this.onClose();
    },
    handleButtonClick(key) {
      const fn = `${key}Callback`;
      this[fn] && this[fn]();
    },
  },
};
</script>

<style lang="less" scoped>
.footer {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e5e6e9;
}
.list-container {
  height: calc(100vh - 110px);
  overflow-y: scroll;
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px 24px;
}

/deep/ .poros-drawer-body {
  min-width: 1136px;
  height: 100%;
  padding: 0;
}
.progress-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.btn {
  position: absolute;
  right: 20px;
  top: 7px;
  z-index: 101;
}
</style>
